<template>
	<view class="view-root">
		<!-- 0.待支付 1.服务中 2.已失效 9.已取消 -->
		<view :class="orderStatusClass[orderInfo.status]"></view>
		<scroll-view class="content-scroll" scroll-y="true">
			<view class="scroll-flex-wrap">
				<view class="order-title">
					<view class="status-name">{{statusName[orderInfo.status]}}</view>
					<view class="status-discribe">{{orderDescribe}}</view>
				</view>
				<view class="doctor-wrap">
					<image class="doctorInfo-card-img" :src="orderInfo.picture"></image>
					<view class="doctorInfo-card">
						<view class="doctorInfo-card-top">
							<view class="doctorInfo-card-info">
								<view class="doctorInfo-layer1">
									<view class="doctorInfo-layer1-box">
										<view class="doctorInfo-layer1-word2" style="margin-right: 32rpx;">{{ orderInfo.doctorName }}</view>
									</view>
									<view class="doctorInfo-layer1-word4">{{ orderInfo.departmentName }}&nbsp;|&nbsp;{{ jobGradeConfig[orderInfo.jobGrade] }}</view>
									<view class="doctorInfo-layer1-word3">{{ orderInfo.hospName }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-info-wrap">
					<u-title value="服务内容"></u-title>
					<view class="info-form-line" style="margin-top: 24rpx;">
						<view class="info-form-title">服务名称：</view>
						<view class="info-form-content">{{orderInfo.signingTitle}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">服务时长：</view>
						<view class="info-form-content">{{orderInfo.signingName}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">服务价格：</view>
						<view class="info-form-content">￥{{orderInfo.signingPrice}}</view>
					</view>
				</view>
				<view class="order-info-wrap">
					<u-title value="订单详情"></u-title>
					<view class="info-form-line" style="margin-top: 24rpx;">
						<view class="info-form-title">订单编号：</view>
						<view class="info-form-content">{{orderInfo.orderCode}}</view>
						<view class="copy-btn" @click="setClipboardData(orderInfo.orderCode)">复制</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">下单时间：</view>
						<view class="info-form-content">{{orderInfo.createdTime}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">应付款：</view>
						<view class="info-form-content">{{orderInfo.needPrice}}</view>
					</view>
					<view v-if="orderInfo.status == 1 || orderInfo.status == 2" class="info-form-line">
						<view class="info-form-title">实际支付：</view>
						<view class="info-form-content">{{orderInfo.amount}}</view>
					</view>
					<view v-if="orderInfo.status == 1 || orderInfo.status == 2" class="info-form-line">
						<view class="info-form-title">支付时间：</view>
						<view class="info-form-content">{{orderInfo.payTime}}</view>
					</view>
					<view v-if="orderInfo.status == 1 || orderInfo.status == 2" class="info-form-line">
						<view class="info-form-title">支付方式：</view>
						<view class="info-form-content">{{orderInfo.payWayName}}</view>
					</view>
					<view v-if="orderInfo.status == 9" class="info-form-line">
						<view class="info-form-title">取消时间：</view>
						<view class="info-form-content">{{orderInfo.updatedTime}}</view>
					</view>
				</view>
				<view v-if="isAfterSale" class="refund-info-wrap">
					<view class="refund-left-wrap">
						<view class="refund-title">退款金额</view>
						<view class="refund-notice-wrap">
							<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_info_notice.png"></image>
							<view class="refund-notice">快递费用及优惠券金额不支持退款</view>
						</view>
					</view>
					<view class="refund-price">￥{{orderInfo.refundAmount}}</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="orderInfo.status == 0" class="bottom-panel">
			<view class="normal-btn" @click="cancelOrder()">取消订单</view>
			<view class="confirm-btn" @click="payOrder()">去支付</view>
		</view>
	</view>
</template>

<script>
	import uTitle from '@/components/u-title/u-title.vue';
	export default {
		components: {
			uTitle
		},
		data() {
			return {
				//0.待支付 1.服务中 2.已失效 9.已取消
				orderStatusClass: {
					0: 'status-wait-bg',
					1: 'status-valid-bg',
					3: 'status-invalid-bg',
					9: 'status-invalid-bg'
				},
				orderDescribe: '',
				statusName: {
					0: '订单待支付',
					1: '私人医生服务中',
					2: '订单已失效',
					9: '订单已取消'
				},
				orderId: 0,
				orderInfo: {},
				countDown: 0,
				payFlag: true //支付按钮开关
			};
		},
		onLoad(options) {
			this.orderId = options.id;
			this.getOrderDetail();
		},
		onUnload() {
			if (this.countDown != 0) {
				clearInterval(this.countDown);
			}
		},
		methods: {
			getOrderDetail() {
				this.$api.getSignOrderDetail({
					params: {
						id: this.orderId
					}
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.result;
						switch (this.orderInfo.status) {
							case 0:
							this.countDown = setInterval(() => {
								this.orderInfo.countDown --;
								if (this.orderInfo.countDown == 0) {
									clearInterval(this.countDown);
									this.countDown = 0;
									this.getOrderDetail();
								} else {
									this.orderDescribe = '等待支付，' + this.secTotime(this.orderInfo.countDown) + '后订单自动关闭'
								}
							}, 1000)
								this.orderDescribe = '等待支付，' + this.secTotime(this.orderInfo.countDown) + '后订单自动关闭';
								break;
							case 1:
								this.orderDescribe = '服务到期时间：' + this.orderInfo.serviceEndDate;
								break;
							case 2:
								this.orderDescribe = '私人医生服务已到期';
								break;
							case 9:
								this.orderDescribe = '订单已被取消';
								break;
						}
					} else {
						uni.showToast({
							icon:'none',
							title: res.message
						})
					}
				})
			},
			cancelOrder() {
				uni.showModal({
					title: `确认要取消订单吗？`,
					success: res => {
						if (res.confirm) {
							this.$api.cancelSignOrder({
								data: {
									id: this.orderId
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon:'none',
										title: '取消成功'
									});
									this.getOrderDetail();
								} else {
									uni.showToast({
										icon:'none',
										title: res.message
									});
								}
							})
						}
					}
				});
			},
			//发起微信支付
			payOrder() {
				if (this.payFlag) {
					this.payFlag = false;
					this.$api
						.payDoctorSign({
							data: {
								id: this.orderId
							}
						})
						.then(res => {
							if (res.code == 200) {
								this.wxRequestPayment(res.result);
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						});
				}
			},
			
			//微信小程序拉起支付
			wxRequestPayment(res) {
				wx.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.packageValue,
					signType: res.signType,
					paySign: res.paySign,
					success: success => {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						});
						this.getOrderDetail();
					},
					fail: error => {
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						});
					},
					complete: () => {
						this.payFlag = true;
					}
				});
			},
			
			secTotime(s) {
			      var t = '';
			      if(s > -1){
			        var hour = Math.floor(s/3600)
			        var min = Math.floor(s/60) % 60
			        var sec = s % 60
					if (hour > 0) {
						t = hour + "小时"
					}
					if (min > 0) {
						t += min + "分"
					}
			        if(sec < 10){
			          t += "0"
			        } 
			        t += sec.toFixed(0)
			      } 
			      return t + '秒'
			}
		}
	}
</script>

<style lang="less" scoped>
@import './signOrderDetail.less';
</style>
